<template>
  <div>
    <!-- <div style="text-align: center; line-height: 32px">催交/监造报表</div> -->

    <div>
      <TimeInterval label="实际到港日期" v-model="contractDate"></TimeInterval>
    </div>

    <div class="chart-box">
      <commonEcharts
        :option="option1"
        :width="width"
        height="150px"
      ></commonEcharts>
      <div class="process-range">
        <div class="range-title">发货进度</div>
        <div class="range-line">
          <div class="icon" style="background-color: #3354f4"></div>
          <div class="text">累计到港 <span>100</span></div>
        </div>
        <div class="range-line">
          <div class="icon" style="background-color: #954500"></div>
          <div class="text">累计装船 <span>70</span></div>
        </div>
      </div>
    </div>

    <div class="main-box">
      <commonTabs v-model="currentIndex" :navs="tabs">
        <template v-for="(item, index) in tabs" :key="index" v-slot:[index]>
          <component
            :is="item.is"
            :actived="currentIndex == index"
            :type="item.type"
          />
        </template>
      </commonTabs>
    </div>

    <CommonFloatMenu :columns="menuColumns"></CommonFloatMenu>
  </div>
</template>
  
  <script>
import { defineComponent, ref, shallowRef, watch } from "vue";
import CommonFloatMenu from "@/components/common-float-menu/index.vue";
import CommonEcharts from "@/components/common-echarts/index.vue";
import CommonTabs from "@/components/common-tabs/index.vue";

import { Classify, Abnormal } from "./module";
import { TimeInterval } from "@/module/longnows/components/index";

const formatDate = (date) =>
  `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;

export default defineComponent({
  components: {
    CommonFloatMenu,
    CommonEcharts,
    CommonTabs,
    Classify,
    Abnormal,
    TimeInterval,
  },

  setup(props, { slots }) {
    const option1 = ref({});
    const width = ref("50%");

    const contractDate = ref([new Date(), new Date()]);
    watch(
      () => contractDate.value,
      (newValue, oldValue) => {
        try {
          const [start, end] = newValue;
          console.log(formatDate(start), formatDate(end));
        } catch (error) {}
      }
    );

    const currentIndex = ref(0);
    const tabs = ref([
      {
        title: "分类统计",
        is: shallowRef(Classify),
        type: 0,
      },
      {
        title: "异常预警",
        is: shallowRef(Abnormal),
        type: 1,
      },
    ]);

    const menuColumns = ref([
      {
        title: "返回",
        colProps: {
          background: " #2751a6",
        },
        onClick: () => {
          window.history.back();
        },
      },
    ]);

    const placeItemStyle = {
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      itemStyle: {
        color: "#cbccd0",
      },
      emphasis: {
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
      },
    };

    setTimeout(() => {
      option1.value = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        color: ["#3354F4", "#D8D8D8"],
        title: {
          text: "80%",
          left: "center",
          top: "42%",
          textStyle: {
            color: "#000000",
            fontSize: 18,
            align: "center",
          },
        },
        series: [
          {
            name: "运动情况",
            type: "pie",
            radius: ["55%", "70%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center",
              },
            },

            data: [
              { value: 80, name: "已完成" },
              { value: 20, name: "未完成" },
            ],
          },
        ],
      };
    }, 0);

    return {
      contractDate,
      currentIndex,
      tabs,
      width: width,
      option1,
      menuColumns,
    };
  },
});
</script>
  
  
  <style lang="less">
* {
  margin: 0;
  padding: 0;
}
.chart-box {
  box-shadow: 0 1px 8px 0 #ebedf0;
  width: 95%;
  margin: 15px auto;
  border-radius: 15px;
  display: flex;
}

.process-range {
  flex: 1;
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  .range-title {
    font-size: 16px;
    font-weight: 600;
  }
  .range-line {
    display: flex;
    padding: 5px 10px 5px 0;
    font-size: 14px;
    .icon {
      width: 12px;
      height: 12px;
      border-radius: 6px;
      align-self: center;
      margin-right: 10px;
    }
    .text {
      color: #77838f;
    }
  }
}

.main-box {
  padding: 10px 20px;
}
</style>